<template>
  <div class="v-allRatio">
    <Card :bordered="true">
        <p slot="title">成交量总比</p>
        <div slot="extra">
            <Dropdown trigger="custom" :visible="visible" class="v-dropdown" @on-clickoutside="handleClose" style="min-width: 240px;" placement="top-end">
              <span @click="handleOpen">
                  门店筛选
                  <Icon type="arrow-down-b"></Icon>
              </span>
              <DropdownMenu slot="list">
                  <CheckboxGroup v-model="areaNameCheck">
                      <Checkbox v-for="(item, index) in searchAreas" :key="index" :label="item.areaName"></Checkbox>
                  </CheckboxGroup>
                  <div style="text-align: right; margin:10px;">
                      <Button type="primary" @click="handleSubmit">确定</Button>
                  </div>
              </DropdownMenu>
            </Dropdown>
        </div>
        <div id="chartAllRatio"></div>
    </Card>
  </div>
</template>

<script>
import { mapState } from 'vuex'
var echarts = require('echarts/lib/echarts');
require('echarts/lib/chart/line');
require('echarts/lib/chart/bar');

// 引入提示框和标题组件
require('echarts/lib/component/tooltip');
require('echarts/lib/component/title');
require('echarts/lib/component/legend');
export default {
  name: "v-storeRushHour",
  props: {
  },
  data () {
    return {
      volumeReport: {},
      searchAreas: [],
      areaName: '',
      areaCode: '',
      visible: false,
      areaNameCheck: [],
      myChart: null
    }
  },
  created () {
    this.SearchAreas()
  },
  computed: {
    ...mapState({
      sideBarWidth: state => state.sideBarWidth,
      getAjaxParams: state => state.timeParams
    })
  },
  watch: {
    getAjaxParams(val) {
      if (this.areaCode !== '') {
        this.VolumeReport(Object.assign({}, val, {areaCodes: this.areaCode}))
        this.$store.dispatch('SetDownLink', Object.assign({}, val, {areaCodes: this.areaCode}))
      }
    },
    sideBarWidth (val) {
      setTimeout(() => {
        this.myChart.resize()
      }, 200)
    }
  },
  methods: {
    VolumeReport (params) {
      this.$store.dispatch('SpinShow', true)
      this.$store.dispatch('VolumeReport', this.$qs(params)).then((res) => {
        if (res.success === '1') {
          this.$store.dispatch('SpinShow', false)
          this.volumeReport = res.data.sort((a, b) => {
            return Number(a.areaCode.split('-')[2]) - Number(b.areaCode.split('-')[2])
          })
          let xAxis = []
          let seriesA = []
          let seriesB = []
          for (let i in this.volumeReport) {
            xAxis.push(this.volumeReport[i].areaName)
            seriesA.push(this.volumeReport[i].volumeSucc)
            if (this.volumeReport[i].enters === 0) {
              seriesB.push(0)
            } else {
              seriesB.push((100 * this.volumeReport[i].volumeSucc / this.volumeReport[i].enters).toFixed(2))
            }
          }
          this.$nextTick(() => {
            this.drawChartLine('chartAllRatio', xAxis, seriesA, seriesB)
          })
        }
      })
    },
    drawChartLine (id, xAxis, seriesA, seriesB) {
      this.myChart = echarts.init(document.getElementById(id));
      this.myChart.setOption({
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          },
          formatter: (params) => {
            let res = `<p>${params[0].axisValue}</p>`
            params.map((item) => {
              if (item.seriesType === 'line') {
                res += `<p>${item.marker} ${item.seriesName}：${item.value}%</p>`
              } else {
                res += `<p>${item.marker} ${item.seriesName}：${item.value}</p>`
              }
            })
            return res
          }
        },
        legend: {
          // itemWidth: 10,
          itemHeight: 10,
          bottom: 10,
          data:['成交量', '成交率']
        },
        grid: {
          left: '60px',
          // top: '10px',
          right: '60px',
          bottom: '86px'
        },
        xAxis: [
          {
            type: 'category',
            data: xAxis,
            axisPointer: {
              type: 'shadow'
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999'
              }
            }
          }
        ],
        yAxis: [
          {
            type: 'value',
            name: '',
            interval: 50,
            splitLine: {
              lineStyle: {
                color: '#f0f0f0'
              }
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              formatter: '{value}'
            }
          },
          {
            type: 'value',
            name: '',
            interval: 5,
            splitLine: {
              lineStyle: {
                color: '#f0f0f0'
              }
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: '#999'
              }
            },
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name:'成交量',
            type:'bar',
            barWidth: 23,
            color: '#ff9e4f',
            label: {
              normal: {
                show: true,
                position: 'top',
                color: '#333',
                formatter: function(params) {
                  if (params.value === 0) {
                    return '' 
                  }
                }
              }
            },
            data: seriesA
          },
          {
            name:'成交率',
            type:'line',
            showSymbol: false,
            color: '#4bc9b6',
            yAxisIndex: 1,
            data: seriesB
          }
        ]
      }, true)
      setTimeout(() => {
        window.onresize = this.myChart.resize
      }, 200)
    },
    SearchAreas () {
      this.$store.dispatch('SearchAreas').then((res) => {
        if (res.success === '1') {
          this.searchAreas = res.data
          let _areaNameCheck = []
          let _areaCode = []
          this.searchAreas.map((item) => {
            _areaNameCheck.push(item.areaName)
            _areaCode.push(item.areaCode)
          })
          this.areaNameCheck = _areaNameCheck
          this.areaCode = _areaCode.join(',')
          this.areaName = this.areaNameCheck.join(',')
          this.VolumeReport(Object.assign({}, this.getAjaxParams, {areaCodes: this.areaCode}))
          this.$store.dispatch('SetDownLink', Object.assign({}, this.getAjaxParams, {areaCodes: this.areaCode}))
        }
      })
    },
    handleOpen () {
      this.visible = true
    },
    handleClose () {
      this.visible = false
    },
    handleSubmit () {
      let _areaCode = []
      this.areaNameCheck.map((item) => {
        this.searchAreas.map((subItem) => {
          if (item === subItem.areaName) {
            _areaCode.push(subItem.areaCode)
          }
        })
      })
      this.areaName = this.areaNameCheck.join(',')
      this.areaCode = _areaCode.join(',')
      this.VolumeReport(Object.assign({}, this.getAjaxParams, {areaCodes: this.areaCode}))
      this.$store.dispatch('SetDownLink', Object.assign({}, this.getAjaxParams, {areaCodes: this.areaCode}))
      this.visible = false
    }
  }
};
</script>

<style lang="less">
.v-allRatio {
  .v-dropdown {
    text-align: right
  }
  .ivu-dropdown-menu {
    width: 240px;
    padding: 10px 15px;
  }
  .ivu-checkbox-group {
    text-align: left;
  }
  .ivu-card-head p, .ivu-card-head-inner {
      height: 32px;
      line-height: 32px;
      font-size: 24px;
  }
  .ivu-card-head {
      padding: 30px 20px;
      border-bottom: none;
  }
  #chartAllRatio {
    width: 100%;
    height: 520px;
  }
}
</style>
